import React, { useCallback, useState } from "react";
import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
import { AppstoreOutlined, MailOutlined, SettingOutlined, RightOutlined, UserOutlined } from '@ant-design/icons';
import { Col, Menu, Row, Space, Divider, Avatar, Button } from 'antd';
import { Route, Routes, useNavigate } from 'react-router-dom'
import request, { baseUrl } from "../../utils/request";
import Personal from "./index/Personal";
import Member from './index/Member'
import Deadline from './index/Deadline'
import Upgrade from './index/Upgrade'
import Information from './index/Information'
import Favs from './index/Favs'
import Record from './index/Record'
import { connect } from 'react-redux'
import { useEffect } from "react";

function Index(props) {


    const navigate = useNavigate()
    // console.log(props.state.userInfo.authorization);
    useEffect(() => {
        if (!props.state.userInfo.authorization) {
            navigate('/login')
        }
    }, [])
    // console.log(props.state.userInfo.username);
    // const [username,setState]
    const [fileList, setFileList] = useState([
        {
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
    ]);
    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };
    const onPreview = async (file) => {
        let src = file.url;
        if (!src) {
            src = await new Promise((resolve) => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow?.document.write(image.outerHTML);
    };
    const username = props.state.userInfo.username
    function getItem(label, key, icon) {
        return {
            label,
            key,
            icon,
        };
    }
    const items = [
        getItem(username, 'personal', <Avatar size='default' icon={<UserOutlined />} />),
        getItem('Member会员分组: 普通会员', 'member', '1'),
        getItem('Deadline会员期限:     无期限', 'deadline', '1'),
        getItem('Upgrade升级会员', 'upgrade', <RightOutlined />),
        getItem('Information我的资料', 'information', <RightOutlined />),
        getItem('Favs我的收藏', 'favs', <RightOutlined />),
        getItem('Record访问记录', 'record', <RightOutlined />),

    ];
    const onClick = (e) => {
        // console.log('click', e);
        if (e.key == 'upgrade') {
            navigate('/upgrade')
            return
        } else if (e.key == 'personal') {
            // console.log(1);
            navigate('information')
            return
        }
        navigate(e.key)
        // navigate('favs')
    };
    const logout = useCallback(() => {
        props.logout()
        navigate('/login')
    }, [])
    return (
        <div>
            <ImgCrop rotate>
                <Upload
                    action={baseUrl + '/via/1.jpg'}
                    listType="picture-card"
                    fileList={fileList}
                    onChange={onChange}
                    onPreview={onPreview}
                >
                    {fileList.length < 5 && '+ Upload'}
                </Upload>
            </ImgCrop>
            <Row>
                <Col span={8}>
                    <Menu
                        onClick={onClick}
                        style={{
                            width: 256,
                        }}
                        mode="vertical"
                        items={items}
                    />


                </Col>
                <Col push={0} span={16}>
                    <>
                        <Routes>
                            <Route path="personal" element={<Personal />}></Route>
                            <Route path="member" element={<Member />}></Route>
                            <Route path="deadline" element={<Deadline />}></Route>
                            <Route path="upgrade" element={<Upgrade />}></Route>
                            <Route path="information" element={<Information />}></Route>
                            <Route path="favs" element={<Favs />}></Route>
                            <Route path="record" element={<Record />}></Route>
                        </Routes>

                    </>
                </Col>
            </Row>
            <Row>
                <Col push={0} span={4}>
                    <Button style={{ background: '#f0eeee', color: '#282828' }} type="primary" onClick={logout}>退出登录</Button>
                </Col>
            </Row>

        </div >

    )


}
const mapStateToProps = function (state) {
    console.log('state', state);
    return { state }
}
const mapDispatchToProps = function (dispatch) {
    return {
        logout() {
            dispatch({ type: 'logout' })
        }
    }
}
Index = connect(mapStateToProps, mapDispatchToProps)(Index)

export default Index